<%@page contentType="text/html" %>
<%@page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <%@include file="WEB-INF/jsp/common/head.jsp" %>
    <style type="text/css">
        .input-group {
            margin-top: 40px;
        }
    </style>
</head>
<body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1" style="background-color:#9D9D9D;">
            <h2 class="h2" style="text-align: center;">用户注册</h2>
            <div class="col-md-8 col-md-offset-2 ">
                <form action="${pageContext.request.contextPath}/user/userAdd">
                    <div class="input-group">
                        <span class="input-group-addon">用户账号<font style="color: red;">*</font></span>
                        <input type="text" class="form-control" id="username" name="userName" placeholder="3-16位字符"
                               aria-describedby="basic-addon1" style="float: left;width: 85%;">

                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">用户密码<font style="color: red;">*</font></span>
                        <input type="password" class="form-control" id="password" name="password" placeholder="8-16位字符"
                               aria-describedby="basic-addon1" style="float: left;width: 85%;">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">确认密码<font style="color: red;">*</font></span>
                        <input type="password" class="form-control" id="password2" placeholder="8-16位字符"
                               aria-describedby="basic-addon1" style="float: left;width: 85%;">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">姓名<font style="color: red;">*</font></span>
                        <input type="text" class="form-control" id="name" name="name" placeholder="name"
                               aria-describedby="basic-addon1" style="float: left;width: 85%;">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">性别<font style="color: red;">*</font></span>
                        <div class="radio-box" style="float: left;margin-left: 10%;">
                            <input name="sex" type="radio" id="sex-1" checked value="男">
                            <label for="sex-1">男</label>
                        </div>
                        <div class="radio-box" style="float: left;margin-left: 10%;">
                            <input type="radio" id="sex-2" name="sex" value="女">
                            <label for="sex-2">女</label>
                        </div>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">电话<font style="color: red;">*</font></span>
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="phone"
                               aria-describedby="basic-addon1" style="float: left;width: 85%;">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">邮箱</span>
                        <input type="text" class="form-control" id="email" name="email" placeholder="email"
                               aria-describedby="basic-addon1" style="float: left;width: 85%;">
                    </div>
                    <button type="submit" class="btn btn-default " style="width: 50%; margin: 15% 0 20% 25%;">注册
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/userAdd.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var Tf =
        <%=request.getParameter("addKey")%>
        if (Tf != null) {
            alert("用户名已存在，请重新输入");
        }
    })
</script>
</html>